<template>
<div class="eject" teleport="body">
    <el-form :model="form" label-width="120px">
      <el-form-item label="adminid:">
        <span>{{ form.adminid }}</span>
      </el-form-item>
      <el-form-item label="adminname:">
        <span>{{ form.adminname }}</span>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="form.password" style="width:200px"/>
      </el-form-item>
      <el-form-item label="身份:">
    <el-radio-group v-model="form.role" class="ml-4">
      <el-radio :label="1" size="large">超级管理员</el-radio>
      <el-radio :label="2" size="large">普通管理员</el-radio>
    </el-radio-group>
    <p>
            <el-tree ref="treeRef" :data="data" show-checkbox  node-key="id" highlight-current />
        </p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="converted">修改</el-button>
        <el-button type="primary" @click="shut">取消</el-button>
      </el-form-item>
    </el-form>
</div>

</template>
<script setup lang="ts">
import {reactive,ref,defineProps,watch } from 'vue';
import service from '../../../until/service';
import { ElMessage,ElTree} from 'element-plus'
import 'element-plus/dist/index.css';
import {menudata as data} from "../../../grants/menudata"
import type {TreeKey} from "element-plus/es/components/tree/src/tree.type"

// let sa = ref([])
// 接收传的参数
const props = defineProps<{
    adminname:string,
    // zu:object
}>()
// 声明自定义事件
const emit = defineEmits<{
  (e:"transmit"):void,
  (e:'successs'):void
}>()
// 监听传的值的变化
watch(props,()=>{
  form.password = ''

  fetch()
},{
  deep:true
})
interface IAdmin {
    "adminname": string,
    "password": string,
    "role": number,//1:表示超级管理员，2：普通管理员
    "adminid": string,
    "checkedKeys": string[]
}
// 定义管理员数据
const form:any = reactive<IAdmin>({
  adminname: '',
  adminid:'',
  role:1,
  password:'',
  checkedKeys:[]

})

let  treeRef:any = ref<InstanceType<typeof ElTree>>();
// 获取管理员数据
const fetch = ()=>{
  
  service({
    url:'/admin/detail',
    params:{
      adminname:props.adminname
    }
  }).then(res=>{
    if(res.data.code==='200'){
      // sa.value = []
      form.adminid = res.data.data[0].adminid,
      form.adminname = res.data.data[0].adminname,
      form.checkedKeys = res.data.data[0].checkedKeys,
      form.role = res.data.data[0].role
      // sa.value = res.data.data[0].checkedKeys
      treeRef.value.setCheckedKeys(res.data.data[0].checkedKeys,false)
      // console.log(sa.value)
    }
  })
}
// 修改管理员数据
const converted = ()=>{
    let arr:TreeKey[] = treeRef.value!.getCheckedKeys();//获取的是选中状态的菜单项。

let halfArr:TreeKey[] = treeRef.value!.getHalfCheckedKeys();//获取半选中状态的菜单项。

arr = arr.concat(halfArr);

form.checkedKeys = arr ;
  service({
    url:'/admin/update',
    method:'post',
    data:{
      adminname: form.adminname,
      password : form.password,
      role:form.role,
      checkedKeys:form.checkedKeys
    }
  }).then(res=>{
    if(res.data.code==='200'){
      ElMessage({
                message:"修改成功",
                type:"success"
            }),
            emit('transmit')
            emit('successs')
    }
  })
}
// 取消按钮
const shut =()=>{
  emit('transmit')
}
</script>
<style scoped>
    .eject{
        width: 400px;
        /* height: 300px; */
        background-color: #fff;
        color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 999;
        /* opacity: 0.7; */
    }
    .dialog-footer button:first-child {
  margin-right: 10px;
}
</style>